<script lang="ts" setup>
import type { Prescription } from '@/types/room';

defineProps<{
    info: Prescription
}>()
</script>

<template>
    <!-- 处方消息（22） -->
    <view class="e-prescription" v-if="info">
        <view class="prescription-content">
            <view class="list-title">
                <view class="label">电子处方</view>
                <view class="extra">
                    原始处方
                    <uni-icons size="16" color="#848484" type="right" />
                </view>
            </view>
            <view class="list-item">{{ info.name }} {{ info.genderValue }} {{ info.age }}岁 {{ info.diagnosis }}</view>
            <view class="list-item">开方时间: {{ info.createTime }}</view>

            <view class="dividing-line"></view>

            <template v-for="med in info.medicines" :key="med.id">
                <view class="list-title">
                    <view class="label">
                        <text class="name">{{ med.name }}</text>
                        <text class="unit">{{ med.specs }}</text>
                        <text class="quantity">x{{ med.quantity }}</text>
                    </view>
                </view>
            </template>

            <view class="list-item">{{ med.usageDosag }}</view>
        </view>
        <navigator v-if="info.orderId === null" class="uni-link" hover-class="none"
            :url="`/subpkg_medicine/payment/index?id=${info.id}`">
            购买药品
        </navigator>
        <navigator v-else class="uni-link" hover-class="none"
            :url="`/subpkg_medicine/order_detail/index?id=${info.orderId}`">
            查看购买药品
        </navigator>
    </view>
</template>

<style lang="scss">
.e-prescription {
    width: 100%;
    margin-top: 60rpx;
    border-radius: 20rpx;
    background-color: #eaf8f6;

    .prescription-content {
        padding: 30rpx;
        border-radius: 20rpx;
        background-color: #fff;
    }

    .list-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;
    }

    .list-item {
        margin-bottom: 10rpx;
        font-size: 26rpx;
        color: #848484;
    }

    .label {
        display: flex;
        justify-content: space-between;
        flex: 1;
        font-size: 32rpx;
        color: #121826;

        &.medicine {
            font-size: 30rpx;
            color: #666;
        }
    }

    .unit {
        width: 200rpx;
    }

    .extra {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #848484;
    }

    :deep(.uniui-right) {
        margin-top: 4rpx;
    }

    .dividing-line {
        padding-bottom: 20rpx;
        margin-bottom: 20rpx;
        border-bottom: 1rpx solid #ededed;
    }

    .uni-link {
        text-align: center;
        line-height: 1;
        padding: 30rpx 0;
        color: #16c2a3;
        font-size: 32rpx;
    }
}
</style>